import { DoubleLeftOutlined, RightOutlined } from "@ant-design/icons"
import { Tooltip } from "antd"

export interface TagGuidItem {
  key: string
  name: string
  [key: string]: unknown
}

export interface TagGuidProps {
  value: TagGuidItem[]
  /**
   * @default 3
   */
  maxLen?: number
  maxTagTextLen?: number
  onChange?(value: TagGuidItem[]): void
}

/**
 * @desc 类组织结构tag导航
 */
export function TagGuid({
  value,
  maxLen = 3,
  maxTagTextLen = 6,
  onChange
}: TagGuidProps) {
  const totalLen = value.length
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      {value.map((l, i, s) => {
        const last = totalLen - 1 === i
        const show = i > totalLen - maxLen - 1
        const needTip = l.name.length > maxTagTextLen
        const name = l.name.substring(0, maxTagTextLen) + (needTip ? "..." : "")

        if (totalLen > maxLen && i === totalLen - maxLen) {
          return (
            <DoubleLeftOutlined
              key={"_gofirst"}
              onClick={() => {
                onChange?.(s.slice(0, maxLen))
              }}
            />
          )
        }
        return (
          <div
            key={l.key}
            onClick={() => !last && onChange?.(s.slice(0, i + 1))}
            hidden={!show}
            style={{ padding: "0 4px", color: last ? "#666" : "#fa541c" }}
          >
            <Tooltip
              title={l.name}
              open={needTip ? undefined : false}
              getPopupContainer={(triggerNode) => triggerNode}
            >
              <span style={{ marginRight: 4 }}>{name}</span>
            </Tooltip>
            {last ? null : <RightOutlined />}
          </div>
        )
      })}
    </div>
  )
}
